<template>
	<view>
		<!-- tab栏切换 -->
		<view class="tab_w flex_a">
			<block v-for="item in tabList" :key="item.status">
				<view class="flex1 h80 lh80 border-r4 ft30 tac" :class="activeTab == item.status ? 'b-primary cf' : ''" @click="tapTab(item.status)">{{ item.name }}</view>
			</block>
		</view>
		<view class="plr30 pt150">
			<block v-for="item in loadList" :key="item.id">
				<view class="mb30 plr30 pt30 bf border-r1 shadow">
					<view class="pb20 bdb">
						<view class="flex h60">
							<text class="flex1">设备类型：{{item.device_type==1?'换电柜':item.device_type==2?'租车':item.device_type==3?'充电柜':''}}</text>
							<view class="warnC" v-if="item.status==1"></view>
						</view>
						<view class="h50">编号：{{item.device_no}}</view>
						<view class="h50">报障时间：{{item.stime | formatTime}}</view>
						<view class="flex">
							<text class="whn">报障描述：</text>
							<text class="flex1">{{item.fault_content}}</text>
						</view>
					</view>
					<view class="flex_a jce h80">
						<view class="flex_a" @click="routerLink({ path: '/pages/admin/userFault/detail',query: {id:item.id} })">
							<text class="pr10 c9">设备详情</text>
							<u-icon name="arrow-right" color="#999" size="26"></u-icon>
						</view>
					</view>
				</view>
			</block>
			<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0"><view class="c9 pt20">暂无此类报障信息</view></view>
			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999"></uni-load-more>
		</view>
	</view>
</template>

<script>
import loadMore from '@/mixins/loadMore'
import {faultList} from '@/api/admin'
export default {
	name: 'deviceList',
	mixins: [loadMore],
	data() {
		return {
			showTime: false,
			activeTab: 1, // 1 未处理 2 已处理
			tabList: [{ name: '未处理', status: 1 }, { name: '已处理', status: 2 }] // 头部tab栏
		}
	},
	onLoad(e) {},
	onShow() {},
	onHide() {},
	computed: {
		isLogin() {
			return this.$store.state.user.isLogin
		}
	},
	methods: {
		// 点击tab栏
		tapTab(status) {
			this.markerInfoShow = false
			this.activeTab = status
			this.page = 1
			this.loadData()
		},
		async loadData() {
			const res = await faultList({
				pageNum: this.page,
				pageSize: this.limit,
				status: this.activeTab,
				
			})
			this.showTime = true
			this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]
		
			this.pageLength = res.rows.length
			this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
		},
	}
}
</script>

<style scoped lang="scss">
.tab_w {
	position: fixed;
	top: 16upx;
	left: 30upx;
	width: 690upx;
	height: 100upx;
	padding: 10upx 14upx;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 50upx;
	overflow: hidden;
	box-shadow: 0px 4px 18px 0px rgba(50, 130, 255, 0.24);
}
.warnC{
	width: 16upx;
	height: 16upx;
	background-color: #FF6600;
	border-radius: 50%;
}
</style>
